<template>
  <div class="standard-box">
    <div class="header">
      <div class="header-icon small-icon"></div>
      <div class="header-icon middle-icon"></div>
      <div class="header-icon big-icon"></div>
      <div class="header-title">{{ info.standardTitle }}</div>
      <div class="header-icon big-icon"></div>
      <div class="header-icon middle-icon"></div>
      <div class="header-icon small-icon"></div>
    </div>
    <div class="standard-main">
      <div class="standard-item">
        <div class="item-header item-resource">
          <i class="jeicon jeicon-table"></i>
          <span>{{ info.resource }}</span>
        </div>
        <div class="item-main">
          <p class="item-info">{{ info.resourceTier }}</p>
          <div class="item-brief">
            <div class="item-brief-head">
              <div class="brief-part">
                <div class="brief-letter">OA</div>
                <div class="biref-num">①</div>
                <div class="biref-name">服务名</div>
              </div>
              <div class="brief-line">-</div>
              <div class="brief-part">
                <div class="brief-letter">LCSP</div>
                <div class="biref-num">②</div>
                <div class="biref-name">模块名</div>
              </div>
              <div class="brief-line">-</div>
              <div class="brief-part">
                <div class="brief-letter">QJSQ</div>
                <div class="biref-num">③</div>
                <div class="biref-name">资源表名</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="standard-item">
        <div class="item-header item-table">
          <i class="fal fa-table"></i>
          <span>{{ info.table }}</span>
        </div>
        <div class="item-main">
          <p class="item-info">{{ info.tableTier }}</p>
          <div class="item-brief">
            <div class="item-brief-head">
              <div class="brief-part">
                <div class="brief-letter">CCSQ</div>
                <div class="biref-num">①</div>
                <div class="biref-name">资源表名</div>
              </div>
              <div class="brief-line">-</div>
              <div class="brief-part">
                <div class="brief-letter">BM</div>
                <div class="biref-num">②</div>
                <div class="biref-name">字段名</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="standard-item">
        <div class="item-header item-view">
          <i class="jeicon jeicon-process"></i>
          <span>{{ info.view }}</span>
        </div>
        <div class="item-main">
          <p class="item-info">{{ info.viewTier }}</p>
          <div class="item-brief">
            <div class="item-brief-head">
              <div class="brief-part">
                <div class="brief-letter">V</div>
                <div class="biref-num">①</div>
                <div class="biref-name">V</div>
              </div>
              <div class="brief-line">-</div>
              <div class="brief-part">
                <div class="brief-letter">OA</div>
                <div class="biref-num">②</div>
                <div class="biref-name">服务名</div>
              </div>
              <div class="brief-line">-</div>
              <div class="brief-part">
                <div class="brief-letter">HYGL</div>
                <div class="biref-num">③</div>
                <div class="biref-name">模块名</div>
              </div>
              <div class="brief-line">-</div>
              <div class="brief-part">
                <div class="brief-letter">WDHY</div>
                <div class="biref-num">④</div>
                <div class="biref-name">资源表名</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import { defineComponent, toRefs } from 'vue';
  import { useI18n } from '@common/locales';
  export default defineComponent({
    name: 'NameStandard',
    setup() {
      const t = useI18n().t;
      const state = {
        info: {
          standardTitle: t('resourceBoard.standard.standardTitle'),
          resource: t('resourceBoard.standard.resource'),
          resourceTier: t('resourceBoard.standard.resourceTier'),
          table: t('resourceBoard.standard.table'),
          tableTier: t('resourceBoard.standard.tableTier'),
          view: t('resourceBoard.standard.view'),
          viewTier: t('resourceBoard.standard.viewTier'),
        },
      };
      return {
        ...toRefs(state),
      };
    },
  });
</script>
<style scoped lang="less">
  .standard-box {
    width: 100%;
    .header {
      width: 100%;
      height: 60px;
      display: flex;
      justify-content: center;
      align-items: center;
      box-sizing: border-box;
      .header-icon {
        background: #3f3f3f;
        border-radius: 50%;
      }
      .small-icon {
        width: 4px;
        height: 4px;
        opacity: 0.2;
      }
      .middle-icon {
        width: 7px;
        height: 7px;
        opacity: 0.6;
        margin: 0 4px;
      }
      .big-icon {
        width: 10px;
        height: 10px;
      }
      .header-title {
        font-size: 18px;
        // font-family: 'PingFang SC, PingFang SC-Bold';
        font-weight: bold;
        color: #3f3f3f;
        padding: 0 10px;
      }
    }
    .standard-main {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: stretch;
      .standard-item {
        width: calc((100% - 40px) / 3);
        box-sizing: border-box;
        align-self: stretch;
        .item-header {
          width: 100%;
          height: 48px;
          line-height: 48px;
          text-align: center;
          font-size: 16px;
          // font-family: 'PingFang SC, PingFang SC-Bold';
          color: #fff;
          border-top-left-radius: 4px;
          border-top-right-radius: 4px;
          i {
            font-size: 18px;
          }
          span {
            padding-left: 10px;
          }
        }
        .item-resource {
          background-color: #fe774b;
        }
        .item-table {
          background-color: #fbc754;
        }
        .item-view {
          background-color: #00a664;
        }
        .item-main {
          width: 100%;
          box-sizing: border-box;
          background-color: #fff;
          padding: 20px;
          border-bottom-left-radius: 4px;
          border-bottom-right-radius: 4px;
          overflow: hidden;
          .item-info {
            font-size: 14px;
            line-height: 20px;
            // font-family: 'PingFang SC, PingFang SC-Normal';
            color: #3f3f3f;
          }
          .item-img {
            width: auto;
            height: 107px;
            display: block;
            margin: 0 auto 0;
          }
          .item-brief {
            width: 100%;
            padding-top: 20px;
            .item-brief-head {
              width: 100%;
              display: flex;
              justify-content: center;
              .brief-letter {
                padding: 2px 7px;
                font-size: 20px;
                font-weight: bold;
                color: #3f3f3f;
                // font-family: 'PingFang SC, PingFang SC-Bold';
                border: 1px dashed #3265f5;
                box-sizing: border-box;
              }
              .biref-num {
                height: 20px;
                line-height: 20px;
                font-size: 14px;
                // font-family: 'PingFang SC, PingFang SC-Normal';
                color: #3f3f3f;
                text-align: center;
                margin-top: 10px;
              }
              .biref-name {
                height: 20px;
                line-height: 20px;
                font-size: 14px;
                // font-family: 'Microsoft YaHei, Microsoft YaHei-Normal';
                color: #3f3f3f;
                text-align: center;
              }
              .brief-line {
                font-weight: bold;
                color: #3f3f3f;
                padding: 12px 7px 0;
                font-size: 20px;
              }
            }
          }
        }
      }
    }
  }
  .standard-box p {
    margin-bottom: 0;
  }
</style>
